<script>
import { defineComponent } from "vue";
import { adminData, addData, rolesAdd, redactId, powerRole } from "@/api/power";
import { EditPen, DeleteFilled } from "@element-plus/icons-vue";
import { ElMessage } from "element-plus";
import { routes } from "@/router";

export default defineComponent({
  data() {
    return {
      // 存放角色列表数据
      tableData: [],
      // 控制添加按钮弹框
      dialogVisible: false,
      // 控制删除按钮弹框
      dialog: false,
      // 控制编辑弹框
      Visible: false,
      // 控制权限弹框
      allot: false,
      // 存放添加的数据
      tableAddData: [],
      // 添加信息
      roleDate: {
        roleName: "",
        roleDesc: "",
      },
      // 编辑信息
      redactData: {
        id: 890,
        roleName: "",
        roleDesc: "",
      },
      // 用来存储要删除的用户id
      delAdminid: [],
      // 分页当前页数
      currentPage: 1,
      // 绑定给 tree 组件的数据
      treeData: routes[1].children,
      // 默认被选中的节点
      defaultCheckedKeys: [],
      formData: {
        id: '',
        rids: ''
      }
    };
  },
  mounted() {
    // 渲染页面
    adminData().then((res) => {
      this.tableData = res.data.data;
      this.$store.commit("setUserRole",this.tableData)
    });
  },
  methods: {
    // 添加角色
    delHandle() {
      this.dialogVisible = true;
      
    },
    // 确认添加角色
    del() {
      addData(this.roleDate).then((res) => {
        console.log(res);
        if (res.data.meta.status == "201") {
          adminData().then((res) => {
            this.tableData = res.data.data;
            
            this.dialogVisible = false;
            this.roleDate = {
              roleName: "",
              roleDesc: "",
            };
            ElMessage.success(res.data.meta.msg);
          });
        } else {
          ElMessage.error(res.data.meta.msg);
        }
      });
    },
    // 删除按钮
    addHandle(data) {
      this.dialog = true;
      this.delAdminid = data.id;
    },
    // 确认删除按钮
    delet() {
      rolesAdd({
        id: this.delAdminid,
      }).then((res) => {
        if (res.data.meta.status == "200") {
          adminData().then((res) => {
            this.tableData = res.data.data;
            this.dialog = false;
          });
          ElMessage.success(res.data.meta.msg);
        } else {
          ElMessage.error(res.data.meta.msg);
        }
      });
    },
    // 编辑角色
    editHandle(data) {
      this.Visible = true;
      this.redactData.id = data.id;
      this.redactData.roleName = data.roleName;
      this.redactData.roleDesc = data.roleDesc;
    },
    // 编辑确认按钮
    redact() {
      redactId(this.redactData).then((res) => {
        if (res.data.meta.status == "200") {
          adminData().then((res) => {
            this.tableData = res.data.data;
            this.Visible = false;
          });
          ElMessage.success(res.data.meta.msg);
        } else {
          ElMessage.error(res.data.meta.msg);
        }
      });
    },
    // 获取到选中的节点
    getCheckedMethods() {

      // 1. 获取选中的节点
      const list = this.$refs.treeRef.getCheckedNodes(true);

      // 2. 创建一个空数组用于存储 选中节点的父级节点 的 label 属性
      const paraentLabel = [];

      // 3. 创建一个空数组用于存储最终的选中结果
      const result = [];

      // 4. 遍历 list 数组
      list.forEach((item) => {
        const paraent = this.treeData.find((treeItem) => {
          return treeItem.children.some((child) => {
            return child.label === item.label;
          });
        });

        if (!paraentLabel.includes(paraent.label)) {
          paraentLabel.push(paraent.label);

          result.push({
            path: paraent.path,
            label: paraent.label,
            children: [item],
          });
        } else {
          const info = result.find((res) => {
            return res.label === paraent.label;
          });
          info.children.push(item);
        }
      });
      this.formData.rids = result;
    },
    // 点击分配权限
    allotHandle(data) {
      this.formData.id = data.id
      this.allot = true
    },
    // 分配完毕确认分配
    xxx(data) {
      this.getCheckedMethods()
      this.allot = false
      powerRole(this.formData).then(res => {
        
        return ElMessage.success('上传成功')
      })
      this.allot = false;
    }

  },

  computed: {
    adminListCom() {
      return this.tableData.slice(
        (this.currentPage - 1) * 8,
        (this.currentPage - 1) * 8 + 8
      );
    },
  },
  components: {
    EditPen,
    DeleteFilled,
  },
});
</script>

<template>
  <!-- 角色列表 -->
  <div class="box_flex">
    <h1>角色列表</h1>
    <el-button @click="delHandle" type="primary">添加角色</el-button>
  </div>
  <el-table :data="adminListCom" border style="width: 100%">
    <el-table-column align="center" type="index" prop="id" label="序号" width="70" />
    <el-table-column align="center" prop="roleName" label="角色名称" width="410" />
    <el-table-column prop="roleDesc" align="center" label="角色描述" width="410" />
    <el-table-column align="center" label="操作" width="410">
      <template #default="data">
        <div>
          <el-button @click="editHandle(data.row)" type="success" >编辑</el-button>
          <el-button @click="addHandle(data.row)" type="danger">删除</el-button>
          <el-button @click="allotHandle(data.row)" type="warning">分配权限</el-button>
        </div>
      </template>
    </el-table-column>
  </el-table>

  <!-- 添加按钮 -->
  <el-dialog v-model="dialogVisible" title="添加角色" width="30%">
    <el-form-item label="角色名称">
      <el-input v-model="roleDate.roleName" />
    </el-form-item>
    <el-form-item label="角色描述">
      <el-input v-model="roleDate.roleDesc" />
    </el-form-item>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="dialogVisible = false">取消</el-button>
        <el-button type="primary" @click="del"> 确认 </el-button>
      </span>
    </template>
  </el-dialog>

  <!-- 删除按钮 -->
  <el-dialog v-model="dialog" title="删除用户" width="30%">
    <span>确定删除用户吗</span>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="dialog = false">取消</el-button>
        <el-button type="primary" @click="delet"> 确认 </el-button>
      </span>
    </template>
  </el-dialog>

  <!-- 编辑按钮 -->
  <el-dialog v-model="Visible" title="编辑用户" width="30%">
    <el-form-item label="角色名称">
      <el-input v-model="redactData.roleName" />
    </el-form-item>
    <el-form-item label="角色描述">
      <el-input v-model="redactData.roleDesc" />
    </el-form-item>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="Visible = false">取消</el-button>
        <el-button type="primary" @click="redact"> 确认 </el-button>
      </span>
    </template>
  </el-dialog>

  <!-- 分配权限 -->

  <el-drawer v-model="allot" title="分配权限" width="30%" :before-close="handleClose" >
    <el-tree ref="treeRef" :data="treeData" :show-checkbox="true" node-key="path"
      :default-checked-keys="defaultCheckedKeys" id="tree"/>


    <template #footer>
      <span class="dialog-footer">
        <el-button @click="allot = false">取消</el-button>
        <el-button type="primary" @click="xxx"> 确认 </el-button>
      </span>
    </template>
  </el-drawer>

  <!-- 分页 -->
    <el-pagination
    
     style="margin-top:20px;padding-bottom:5px"
      background
      layout="prev, pager, next"
      :total="tableData.length"
      v-model:current-page="currentPage"
    />

</template>

<style lang="scss" scoped>
.box_flex {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

</style>

